﻿<template>
  <div class="header">
      <div class="content-wrapper">
      	<div class="avatar">
      		<img width="64" height="64" :src="seller.avatar">
      	</div>
      	<div class="content">
      		<div class="title">
      			<span class="brand"></span>
      			<span class="name">{{seller.name}}</span>
      		</div>
      		<div class="description">
      			{{seller.description}}/{{seller.deliveryTime}}分钟送达
      		</div>
      		<div v-if="seller.supports" class="support">
      			<span class="icon" :class="classMap[seller.supports[0].type]"></span>
      			<span class="text">{{seller.supports[0].description}}</span>
      		</div>
      	</div>
        <div v-if="seller.supports" class="support_count" @click="showDetail">
          <span class="count">{{seller.supports.length}}个</span>
          <i class="icon-keyboard_arrow_right"></i>
        </div>
      </div>
      <div class="bulletin-wrapper" @click="showDetail">
          <span class="bulletin-title"></span>
          <span class="bulletin-text">{{seller.bulletin}}个</span>
          <i class="icon-keyboard_arrow_right"></i>
      </div>
      <div class="background">
        <img width="100%" height="100%" :src="seller.avatar">
      </div>

      <transition name="fade">
        <div v-show="detailShow" class="detail">
          <!-- sticky footer -->
          <div class="detail-wrapper clearfix">
            <div class="detail-main">
              <h1 class="name">{{seller.name}}</h1>
              <div class="star-wrapper">
                <star :size="48" :score="seller.score"></star>
              </div>
              <div class="title">
                <div class="line"></div>
                <div class="text">优惠信息</div>
                <div class="line"></div>
              </div>
              <ul v-if="seller.supports" class="supports">
                <li class="support-item" v-for="item in seller.supports">
                  <span class="icon" :class="classMap[item.type]"></span>
                  <span class="text">{{item.description}}</span>
                </li>
              </ul>
              <div class="title">
                <div class="line"></div>
                <div class="text">商家公告</div>
                <div class="line"></div>
              </div>
              <div class="bulletin">
                <div class="content">{{seller.bulletin}}</div>
              </div>
            </div>
          </div>
          <div class="detail-close" @click="hideDetail">
            <i class="icon-close"></i>
          </div>
          <!-- sticky footer -->
        </div>
      </transition>
  </div>
</template>

<script>
  import star from 'components/star/star.vue';


  export default{
  	props: {
  		seller: {
  			type: Object
  		}
  	},
    data(){
      return{
        detailShow: false
      };
    },
    methods:{
      showDetail(){
        this.detailShow = true;
      },
      hideDetail(){
        this.detailShow = false;
      },
    },
    created () {
        // console.log(this.seller) // seller 为空对象
        this.classMap = ['decrease','discount','special','invoice','guarantee'];
    },
    components:{
      star
    }
  };
</script>

<style>
body,html{line-height: 1;font-weight: 200;font-family: 'PingFang SC','STHeitiSC-Light','Helvetica-Light',arial,sans-serif}
	.header{position: relative;color: #fff;background: rgba(7,17,27,0.5);}
	.content-wrapper{position: relative;padding: 24px 12px 18px 24px;font-size: 0;}
	.avatar{display: inline-block;vertical-align: top;}
  .avatar img{border-radius: 2px;}
	.content-wrapper .content{display: inline-block;margin-left: 16px;font-size: 14px;}
  .content-wrapper .title{margin: 2px 0 8px;}
  .brand{width: 30px;height: 18px;vertical-align: middle;display: inline-block;background-image: url(brand@2x.png);background-size: 100% 100%; }
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
    .brand{
      background-image: url(brand@3x.png);
    }
  }
  .title .name{margin-left: 6px;font-size: 16px;font-weight: bold;}
  .description{font-size: 12px;line-height: 12px;margin-bottom: 10px;}
  .support{font-size: 0;}
  .text{line-height: 12px;font-size: 10px;}
  .icon{width: 12px;height: 12px;vertical-align: top;margin-right: 4px;display: inline-block;background-size: 100% 100%;}
  .decrease{background-image: url(decrease_1@2x.png);}
  .discount{background-image: url(discount_1@2x.png);}
  .guarantee{background-image: url(guarantee_1@2x.png);}
  .invoice{background-image: url(invoice_1@2x.png);}
  .special{background-image: url(special_1@2x.png);}
  .support_count{position: absolute;right: 12px;bottom: 14px;padding: 0 8px;height: 24px;line-height: 24px;border-radius: 14px;background-color: rgba(0,0,0,0.2);text-align: center;}
  .support_count .count{font-size: 10px;vertical-align: top;}
  .support_count .icon-keyboard_arrow_right{font-size: 10px;margin-left: 2px;line-height: 24px;}
  .bulletin-wrapper{position: relative;font-size: 0;height: 28px;line-height: 28px;font-size: 10px;padding: 0 22px 0 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background-color: rgba(7,17,27,0.2);}
  .bulletin-title{display: inline-block;width: 22px;height: 12px;background-image: url(bulletin@2x.png);background-size: 100% 100%;vertical-align: middle;margin-right: 4px;margin-bottom: 1px}
  .bulletin-wrapper .icon-keyboard_arrow_right{font-size: 10px;position: absolute;right: 12px;line-height: 28px;}
  .background{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;filter: blur(10px);}
  .detail{position: fixed;z-index: 100;top: 0;left: 0;width: 100%;height: 100%;overflow: auto;background: rgba(7,17,27,0.8);transition: all 0.5s}
  .fade-enter-active, .fade-leave-active {
    transition: all 0.5s ease;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;background: rgba(7,17,27,0);
  }
  .detail-wrapper{min-height: 100%;width: 100%;}
  .detail-main{margin-top: 64px;padding-bottom: 64px}
  .detail-close{position: relative;width: 32px;height: 32px;margin: -64px auto 0 auto;clear: both;font-size: 32px;}
  .detail-main .name{line-height: 16px;text-align: center;font-size: 16px;font-weight: 700;}
  .detail-main .star-wrapper{padding: 2px 0;margin-top: 16px;text-align: center;}
  .detail-main .title{display: flex;width: 80%;margin: 28px auto 24px;}
  .detail-main .title .line{flex: 1;position: relative;top: -6px;border-bottom: 1px solid rgba(255,255,255,0.2)}
  .detail-main .title .text{padding: 0 12px;font-size: 14px;font-weight: 700;}
  .detail-main .supports{width: 80%;margin: 0 auto;}
  .detail-main .support-item{padding: 0 12px;margin-bottom: 12px;font-size: 0;}
  .detail-main .support-item:last-child{margin-bottom: 0;}
  .detail-main .support-item .icon{display: inline-block;width: 16px;height: 16px;vertical-align: top;margin-right: 6px;background-size: 100% 100%;}
  .detail-main .decrease{background-image: url(decrease_2@2x.png);}
  .detail-main .discount{background-image: url(discount_2@2x.png);}
  .detail-main .guarantee{background-image: url(guarantee_2@2x.png);}
  .detail-main .invoice{background-image: url(invoice_2@2x.png);}
  .detail-main .special{background-image: url(special_2@2x.png);}
  .detail-main .text{font-size: 12px;line-height: 16px;}
  .detail-main .bulletin{width: 80%;margin: 0 auto;}
  .detail-main .bulletin .content{padding: 0 12px;line-height: 24px;font-size: 12px}
</style>
